<template>
    <div>
        <el-header>发布列表</el-header>
        <el-input placeholder="请输入名字搜索" v-model="searchName" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchByName"></el-button>
        </el-input>
        <span style="display:inline-block; margin-right: 4px;margin-left: 8px" v-for="book in bookList" :key="book">
                     <router-link to="/bookDetail" >
                         <div @click="sendId(book)">
                    <van-image
                            style="display: block"
                            width="110"
                            height="100"
                            :src=book.bookimg
                    />
                    <span style="display:block;font-weight: bold;font-size: 13px">{{book.bookname}}</span>
                    <sapn style="display:block;color: red;font-size: 18px">￥{{book.bookprice}}</sapn>
                             </div>
                         </router-link>
                    <el-button @click="deleteById(book.id)" >取消发布</el-button>
                    <!--<van-image-->
                            <!--round-->
                            <!--width="20"-->
                            <!--height="20"-->
                            <!--:src=book.userImg-->
                    <!--/>-->
                    <!--<span style="color: blue">{{book.userName}}</span>-->
        </span>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
        </van-list>
      <buttom/>
    </div>
</template>

<script>
    import buttom from "@/components/book/buttom";

    export default {
        name: "KeepList",
      components:{
          buttom
      },
        data(){
            return{
                loading: false,
                finished: false,
                user: this.$store.state.userinfo.user!=null?this.$store.state.userinfo.user.user.id:'',
                bookList:[],
                searchName:'', //根据name搜索图书
                bookName:'',
                userId:'',
                bookId: '',
            }
        },
        methods:{
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    // 加载状态结束
                    this.loading = false;
                    // 数据全部加载完成
                    this.finished = true;

                }, 100);
            },
            searchByName(){
                var _this=this;
                var name = this.searchName;
                _this.axios.post(
                    "/bookFB/list",
                    // name
                    {
                        bookName:name,
                        userId:this.user
                    }
                ).then(function (response) {
                    console.log("进来了")
                    _this.bookList = response.data.data.bookKeepList2;
                    console.log(_this.bookList)
                })

            },
            deleteById(id){
                var _this=this;
                _this.axios.post(
                    "/bookFB/delete",
                    {
                        bookId:id,
                        userId:this.user,
                    },
                ).then(function(response){
                    console.log(response);
                    _this.bookList = response.data.data.bookList2;
                    console.log( _this.bookList)
                    alert("取消发布成功!")
                }).catch((error) => {
                    alert("取消发布失败!!")
                })
            },

          sendId(obj) {
            //向详情页发送该商品的所有信息
            sessionStorage.setItem("book",JSON.stringify(obj));
            // var userNameId=""+obj.id+","+this.$store.state.userinfo.user.user.username;
            //把书的信息返回到后台
            this.sendBookId(obj.id);
          },
          //把书的信息返回到后台
          sendBookId(id){
            var _this=this;
            _this.axios({
              method:"get",
              url:"/book/getBookId/"+id,
            }).then(()=>{
            })
          },

        },

        created() {
            this.axios.get('/bookFB/list/'+this.user+"").then(
                Response => {
                    console.log(Response)
                    this.bookList = Response.data.data.bookList2;
                    console.log( this.bookList)
                },
                error => {

                }
            )
        }
    }
</script>

<style scoped>

</style>